<template>
    <div class="page">
        <div class="wait">
            <div class="title-item">待办提醒</div>
            <div class="calendar-wrapper" style="height: 300px; width: 100%;">
                <el-calendar v-model:value="selectedDate"></el-calendar>
                <div class="matter">
                    <div class="matter-item" v-for="(item, index) in matterData" :key="index">
                        <div class="Theme" :style="{ backgroundColor: item.bgColor }">
                            {{ item.type }}
                        </div>
                        <div>{{ item.time }} {{ item.content }}</div>
                    </div>
                </div>
            </div>

        </div>

        <div class="entrance">
            <div class="title-item">快速入口</div>
            <div class="inlet-box">
                <div class="inlet-item" v-for="(item, index) in inletData" :key="index">
                    <div class="inlet-img" :style="{ backgroundColor: item.bgColor }">
                        <img :src="item.img">
                    </div>
                    <div>{{ item.name }}</div>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
import overtimeImg from '@/assets/icons/icon-img/加班.png'
import reportRemindImg from '@/assets/icons/icon-img/报告提醒.png'
import myPerformanceImg from '@/assets/icons/icon-img/我的绩效.png'
export default {
    data() {
        return {
            inletData: [
                {
                    img: overtimeImg,
                    name: '补卡',
                    bgColor: '#4470E5'
                },
                {
                    img: reportRemindImg,
                    name: '报告提醒',
                    bgColor: '#5CB87A'
                },
                {
                    img: myPerformanceImg,
                    name: '我的绩效',
                    bgColor: '#F5A623'
                },
                {
                    img: overtimeImg,
                    name: '补卡',
                    bgColor: '#4470E5'
                },
                {
                    img: reportRemindImg,
                    name: '报告提醒',
                    bgColor: '#5CB87A'
                },
                {
                    img: myPerformanceImg,
                    name: '我的绩效',
                    bgColor: '#F5A623'
                }
            ],
            selectedDate: new Date(),
            matterData: [
                { type: '培训', time: '10:00', content: '项目培训（产品功能及流程讲解）', bgColor: '#7AC49E' },
                { type: '会议', time: '14:30', content: '周进度复盘会（同步上周问题及本周计划）', bgColor: '#4470E5' },
                { type: '截止', time: '17:00', content: '月度报告提交（含数据统计及分析结论）', bgColor: '#F5A623' },
                { type: '审核', time: '09:15', content: '样品检测报告审核（重点核对数据准确性）', bgColor: '#F56C6C' },
                { type: '沟通', time: '15:40', content: '与客户确认需求细节（修改检测周期）', bgColor: '#909399' }
            ]
        }
    },
    methods: {

    }
}
</script>

<style scoped lang="scss">
.page {
    display: flex;
    gap: 14px;
}

.wait,
.entrance {
    width: 49%;
    height: 520px;
    background-color: #fff;
    border-radius: 4px;
    padding: 4px;
    box-sizing: border-box;
}

.title-item {
    font-size: 14px;
    color: #666;
    margin: 4px;
    margin-top: 20px;
}

.inlet-box {
    width: 100%;
    padding: 20px;
    box-sizing: border-box;
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
}

.inlet-item {
    width: 60px;
    display: flex;
    flex-direction: column;
    align-items: center;
    color: #333;
    font-size: 14px;
}

.inlet-img {
    width: 40px;
    height: 40px;
    border-radius: 6px;
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
    margin-bottom: 8px;
    transition: all 0.2s;
}

.inlet-img:hover {
    transform: scale(1.1);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
}

.inlet-img>img {
    width: 25px;
    height: 25px;
    object-fit: contain;
}

.date-cell {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 100%;
}

.is-today {
    color: #409EFF;
    font-weight: bold;
}

.is-selected {
    background-color: #409EFF;
    color: #fff;
    border-radius: 50%;
}

.task-mark {
    font-size: 8px;
    color: #F56C6C;
    margin-top: 2px;
}

.matter {
    width: 100%;
    height: 6vh;
    margin: 10px 0;
    padding: 0px 20px;
    box-sizing: border-box;
    overflow-y: auto;
    overflow-x: hidden;

    .matter-item {
        display: flex;
        gap: 10px;
        margin: 6px 0;
        box-sizing: border-box;
        font-size: 14px;
        color: #333;

        .Theme {
            padding: 4px 8px;
            box-sizing: border-box;
            font-size: 12px;
            color: #fff;
        }

    }

}


/* 穿透Element Plus样式，调整日历单元格高度 */
::v-deep .calendar-wrapper .el-calendar-table {
    // height: 100%;
}

::v-deep .calendar-wrapper .el-calendar-day {
    height: 45px;
    padding: 0;
}

::v-deep .el-calendar-day {
    display: flex;
    align-items: center;
    justify-content: center;
}
</style>